<template>
    <fy-card style="text-align: left">
        <template #body>
            <i class="fas fa-bullhorn fa-shake"></i>
            <div class="card-title">最新文章</div>
            <div class="hot-blog-list">
                <div v-for="blog in hotBlogs.list" :key="blog" @click="goToDetail(blog.id)">
                    <HotBlogItem :blog="blog" />
                </div>
            </div>
        </template>
    </fy-card>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import { useRouter } from "vue-router";
import { useBlogsStore } from '@/stores/blog.js'

import HotBlogItem from '@/components/LatestBlogItem.vue'
import FyCard from '@/components/base/FyCard.vue';

import request from '@/utils/request.js'


const blogStore = useBlogsStore();
let hotBlogs = ref({});

const router = useRouter();

onMounted(() => {
    blogStore.getHotBlogs().then((result) => {
        console.log("热门文章：", result);
        hotBlogs.value = result;
    })
})

let goToDetail = (id) => {
    console.log('跳转到详情页面：id=' + id);
    router.push({name:'detail', params:{id}})
}

</script>

<style lang="scss" scoped>

.card-title {
    margin-left: 10px;
}

.hot-blog-list {
    // background-color: green;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}
</style>